{% extends "hall.html" %}
{% block details %}

<ul class="list">
    <p style="text-align: center;">房间列表</p>

    <li style="border-style:double;" >
        <a href="#">房间ID</a>
        <!-- <a href="#">房间ID</a> -->
        <a href="#">状态</a>
        <a href="#">参与</a>
        <a href="#">观察</a>
    </li>
    {% for i,j in list %}
    <li class="room">
        <a href="#">{{i}}</a>
        <a href="#">{{j}}/2</a>
        <a href="/gobang/battle/{{i}}/" target="_blank">对线</a>
        <a href="/gobang/witness/{{i}}/" target="_blank">观战</a>
    </li>
    {% endfor %}
</ul>
<script>
    $(".room").mouseover(function(){
        $(this).addClass('roomactive');
    })
    $(".room").mouseleave(function(){
        $(this).removeClass('roomactive');
    })
</script>
<style>
.roomactive{
    border-style: solid;
    border-color: rgb(111, 109, 236);
}

.list li a{
    
    /* padding-left: 10%;
    padding-right: 10%; */
    /* width: 100px; */
    /* min-width: 100px; */
    /* margin-left: 25%; */
    
    padding-left: 10%;
    padding-right: 10%;
    /* padding-right: 25%; */
    /* margin-right: 15%; */
    text-align: center;
    /* size: 100px 100px 100px 100px; */
}
</style>
{% endblock %}